<template>
  <div>
    <div class="bg-blue p-15 m-t-10">
      <p>您可以在此处查看到无人船巡航时，同步显示的拍摄视频。</p>
    </div>
    <el-card class="box-card card-header m-t-20">
      <div slot="header" class="clearfix f-medium">
        <i class="fa fa-video-camera m-r-10 text-c-blue" aria-hidden="true"></i>
        <span>同步录像</span>
      </div>
      <div class="video-view flex-col-center">
        <div class="loading text-center" v-show="loading">
          <i class="el-icon-loading"></i>
          <p class="text-c-gray f-medium">WS-连接中,请稍后...</p>
        </div>
        <div class="" v-show="!loading">
          <img :src="imgUrl" alt="无人船摄像视频" width="640px" height="480px" />
        </div>
        <div class="error-msg text-center" v-show="fail">
          <p class="f-Elarge">
            <i class="fa fa-exclamation-triangle text-c-red m-r-5" aria-hidden="true"></i>无人船暂无同步录像,您可以尝试<a
              href="javascript:void(0)" class="f-w-400" @click="windowReload">刷新</a>
          </p>
          <div class="text-center">
            There is no synchronous video at present.
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import WebSocket from "@/utils/websocketPackage";
export default {
  name: "ShowVideo",
  data() {
    let dUrl = require("@/assets/icon/noVideo.svg");
    return {
      opening: false,
      fail: false,
      loading: true,
      socket: null,
      imgUrl: dUrl,
      options: {
        url: "ws://ifast3.vipnps.vip:21241/",
        onopen: () => {
          console.log("连接成功");
          this.opening = true;
          this.loading = false;
        },
        onmessage: () => {
          var reader = new FileReader();
          reader.onload = function (eve) {
            if (eve.target.readyState == FileReader.DONE) {
              this.url = this.result;
            }
          };
          reader.readAsDataURL(event.data);
        },
        onclose: (res) => {
          // 改成“暂无同步视频”
          console.log(res, "暂无同步视频");
          this.fail = true;
          this.loading = false;
        },
        // 保活周期 10s
        timer: 30000,
        // 断线重连
        reconnect: true,
      },
    };
  },
  mounted() {
    // this.socket = new WebSocket(this.options);
  },
  methods: {
    windowReload() {
      location.reload();
    },
  },
  beforeDestroy() {
    // this.socket.close();
  },
};
</script>

<style scoped lang="less">
.video-view {
  height: 600px;
  border-radius: 5px;
  overflow: hidden;

  .loading {
    font-size: 50px;
    color: var(--theme);
    cursor: progress;
  }

  .error-msg {
    a {
      color: var(--blue);
      text-decoration: underline;
    }
  }
}

.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}
</style>